<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.push({ name: 'monitorIndex' })">返回</el-button>
    </div>
    <el-row :gutter="16">
      <el-col :span="6">
        <ul class="left-ul">
          <li
            :class="[ liLen === index ? 'active' : '', 'flex']"
            v-for="(item,index) in left"
            :key="index"
            @click="handleLiClick(item)"
          >
            <span style="flex: 1">{{ item.type }}</span>
            <span>{{ item.total }}</span>
          </li>
        </ul>
      </el-col>
      <el-col :span="18">
        <e-table
          ref="eTable"
          :tableData="tableData"
          :columns="columns"
          :loading="loading"
          :pageObj="null"
          :border="null"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getSupplierDetails, getSupplierDirTotal } from '@/api/monitor'
export default {
  data() {
    return {
      left: [],
      liLen: 0,
      tableData: [],
      columns: [
        {
          label: '名称',
          prop: 'materialName'
        },
        {
          label: '规格',
          prop: 'materialSpec'
        }
      ],
      loading: false,
      dictionariesId: this.$route.query.dictionariesId
    }
  },
  methods: {
    handleLiClick(item) {
      this.liLen = this.left.findIndex(v => v.dictionariesId === item.dictionariesId)
      this.getSupplierDetails({ dictionariesId: item.dictionariesId })
    },
    getSupplierDetails(param) {
      getSupplierDetails(param).then(res => {
        console.log('detail res', res)
        this.tableData = res.data.records
      })
    }
  },
  created() {
    getSupplierDirTotal().then(res => {
      this.left = res.data
      this.liLen = this.left.findIndex(v => v.dictionariesId === this.dictionariesId)
    })

    this.getSupplierDetails({ dictionariesId: this.dictionariesId })
  }
}
</script>

<style scoped>
.left-ul li {
  padding: 12px;
  border-bottom: 1px dashed #cccccc;
  cursor: pointer;
}
.active {
  color: #1890ff;
}
</style>
